<template>
	<view class="container1">
		<view style="height: 1px;"></view>
		<view   class="content">
			<view style="width:538rpx;margin-left:66rpx;padding-top:56rpx;margin-right:66rpx;box-sizing: border-box;" class="xztv-column">
				<view  class="xztv-flex-center">
					<text  class="title">添加车牌</text>
				</view>
				<view  class="xztv-flex-center mt-20">
					<text  class="tips-text">请留下您真实的联系方式和姓名</text>
				</view>
				<view style="height:20rpx;"></view>
				<view class="xztv-row item" >
					<view class="item-left">
						<text >姓名:</text>
					</view>
					<view  class="item-right">
						<input class="input" v-model="form.empName"/>
					</view>
				</view>
				
				<view class="xztv-row item" >
					<view class="item-left">
						<text>手机号:</text>
					</view>
					<view  class="item-right">
						<input class="input" type="tel" v-model="form.empMobile"/>
					</view>
				</view>
				
				<view class="xztv-row item" >
					<view class="item-left">
						<text>车位号:</text>
					</view>
					<view  class="item-right" >
						<picker @change="pklotConfirm" :value="index" :range="pklotArr">
							<view class="input xztv-row xztv-col-center" v-if="form.pklot==''" >
								请选择车位号
							</view>
							<view class="input xztv-row xztv-col-center" v-else>
								{{form.pklot}}
							</view>
						</picker>
						<!-- <picker @change="goodsModelListConfirm" :value="pklot"
						 :range="pklotList" range-key="pklot"
						 mode="selector">
							{{form.pklot}}4444
						</picker> -->
					</view>
				</view>
				<view class="xztv-row item" >
					<view class="item-left">
						<text>车牌号:</text>
					</view>
					<view  class="item-right">
						<!-- <input class="input" type="tel" v-model="userForm.phone"/> -->
						<view class="input xztv-row xztv-col-center"  @click="carModal">
							<text>{{form.plateNumber}}</text>
						</view>
						
					</view>
				</view>
				
			</view>
			
			<view class="submit xztv-flex-center" @click="addPlateNum">
				<text>添加</text>
			</view>
		</view>
		
		
		<uni-popup ref="popupRef" >
			<view style="width:750rpx;">
				<b5-car-number @carInput="carInput" :car-num="car"></b5-car-number>
			</view>
		    <view class="add-btn zaozao-flex-center" style="margin-top: 30rpx;" v-if="car.length>=7" @click="confirmCarNum()">
		    	<text>确认</text>
		    </view>
		</uni-popup>
	</view>
</template>

<script>
	import {objectValueAllEmpty,checkPhoneNumber,checkIdCard} from "@/utils/functions.js"
	import {addPlateNumber,getPklotList} from "@/api/carMonthlyRental.js";
	export default {
		data() {
			return {
				form:{
					empName:"",
					empMobile:"",
					plateNumber:"",
					pklot:"",
				},
				car:'浙A',
				pklot:"",
				index:0,
				pklotList:[],
				pklotArr:[],
				
			}
		},
		mounted() {
			
		},
		watch:{
			
		},
		onLoad(options){
			
		},
		onShow(){
			this.getPklotList();
		},
		methods: {
			pklotConfirm(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.form.pklot=this.pklotArr[e.detail.value]
			},
			getPklotList(){
				console.log("yangzl");
				getPklotList().then((res)=>{
					console.log(res);
					if(res.data.code==0){
						this.pklotList=res.data.pklotList;
						this.pklotArr=res.data.pklotArr;
						console.log("pklotArr",this.pklotArr);
					}
				})
			},
			addPlateNum(){
				if(objectValueAllEmpty(this.form)){
					uni.showToast({
						title:"请将信息填写完整",
						icon:"none"
					})
					return
				}
				if(!checkPhoneNumber(this.form.empMobile)){
					uni.showToast({
						title:"请输入正确的手机号",
						icon:"none"
					})
					return
				}
				addPlateNumber(this.form).then((res)=>{
					if(res.data.code==0){
						uni.showToast({
							title:res.data.msg,
							duration:2000,
							icon:"success"
						});
						uni.navigateTo({
							url:`/pages/car/monthlyRental/list`
						})
					}else{
						uni.showToast({
							title:res.data.msg,
							duration:2000,
						});
					}
				})
			},
			confirmCarNum(){
				this.form.plateNumber=this.car;
				this.$refs.popupRef.close();
			},
			carModal(){
			    this.$refs.popupRef.open('center')
			},
			carInput(numList){
			       this.car = numList.join('')
			},
			
		}	
	}
</script>

<style scoped lang="less">
	.add-btn{
		width: 702rpx;
		height: 80rpx;
		background: #40C7B8;
		border-radius: 156rpx;
		opacity: 1;
		margin-left:24rpx;
		color:white;
	}
	.xztv-row{
		display: flex;
		flex-direction: row;
	}
	.xztv-col-center{
		align-items: center;
	}
	.xztv-flex-center{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.content{
		display: flex;
		margin-top:364rpx;
		width:670rpx;
		height: 730rpx;//930rpx
		margin-left:40rpx;
		margin-right:40rpx;
		position: relative;
		background-image: url("https://www.aliwgzf.com/static/jiangnan/images/receiveContentBg.webp");
		//background-repeat: no-repeat;
		//background-size: cover;
		background-size: 100% 100%;
		.submit{
			width:418rpx;
			height: 98rpx;
			left:126rpx;
			bottom:-36rpx;
			position: absolute;
			background-color: #FED633;
			border-radius: 30rpx;
		}
		.title{
			height: 62rpx;
			font-size: 44rpx;
			font-weight: 600;
			color: #333333;
			line-height: 52rpx;
		}
		.tips-text{
			height: 28rpx;
			font-size: 20rpx;
			font-weight: 600;
			color: #979797;
			line-height: 23rpx;
		}
		
		.item{
			width:538rpx;
			height:80rpx;
			margin-top:28rpx;
			//box-sizing: border-box;
			// :first-child{
			// 	margin-top:48rpx;
			// }
			
			.item-left{
				width:160rpx;
				height:80rpx;
				padding-top:18rpx;
				box-sizing: border-box;
				text{
					
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
					line-height: 38rpx;
				}
			}
			.item-right{
				display: flex;
				height:80rpx;
				.input{
					width: 378rpx;
					height: 80rpx;
					background: #F5F5F5;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					opacity: 1;
				}
				
			}
		}
	}
	.xztv-filleted-corner-20rpx{
		background: linear-gradient(90deg, #0199FE 0%, #0186FF 100%);
	}
	.info-form {
		width: 80%;
		height: 100%;
		margin: auto;
		font-size: 30rpx;
	}
	.award-operate {
		width:160rpx;
		margin-right:20rpx;
	}
	
	.award-operate-btn {
		color: white;
		border-radius: 50px;
		font-size: 28rpx;
		height:64rpx;
		width:160rpx;
	}
	
	.item-rigth {
		margin: 0 auto;
	}
	
	.container1{
		background: #F4F6F9;
		margin: 0;
		height: 1624rpx;
		width:750rpx;
		color:rgba(0, 0, 0, 0.89);
		background-image: url(https://www.aliwgzf.com/static/jiangnan/images/receiveAwardBg.webp);
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
	}
	.prize-item{
		width: 702rpx;
		height: 168rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-left:24rpx;
		margin-top:16rpx;
		.left{
			width: 160rpx;
			height: 120rpx;
			background: #D8D8D8;
			border-radius: 12rpx;
		}
	}
	.tips-view {
		position: absolute;
		width: 100%;
		bottom: -40rpx;
		color: white;
		font-size: 28rpx;
	}
	
	.bgSize {
		background-repeat: no-repeat;
		background-size: cover;
	}
	
</style>